//引入vue
import Vue from "vue";

//引入vuex
import VueX from 'vuex';
// 引入axios
import axios from 'axios'

//使用vuex
Vue.use(VueX)

//创建状态管理state
const state={
    count:1,
    movieList:[]

}
//mutation是唯一可以修改state的方式,里面的函数接收的第一个参数是state
const mutations={
    addCount(state){
        state.count++
    },
    //第二个参数接收一个解构的对象,是有调用时传递的值(是一个对象)
    addCountN(state,{n}){
        state.count += n
    },

    getMovieList(state,movie){
        state.movieList = movie

    }
}

//actions是专门用来处理异步函数的, 处理后同过接收一个对象中的commit方法来交给mutations处理
const actions={
    //异步不传值
    addCountWait({commit}){
        setTimeout(() => {
            commit('addCount')
        }, 1000);
    },

    //异步传值,第二个参数是接收的参数
    addCountNWait({commit},payload){
        setTimeout(() => {
            commit('addCountN',payload)
        }, 1000);
    },

    //异步请求电影列表
    async getMovie({commit}){
        const re = await axios.get('https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a')
        commit('getMovieList',re.data.data.list)
    }
}

const getters={
    //这是state中的一个计算属性方式,通常用来过滤列表,第一个参数是tate
    //这是不需要接收参数的情况,返回的是过滤后的对象数据
    likeMovie(state){
        return state.movieList.filter((item)=>{
            return item.name.length>=2 && item.name.length<=3
        })
    },
    //如果接收参数,则需要返回一个函数,然后由调用方传递参数
    loveMovie(state){
        return ({a,b})=>{
            return state.movieList.filter((item)=>{
                return item.name.length>=a && item.name.length<=b
            })
        }
    }
}

//暴露vux实例
export default new VueX.Store({
    state,
    mutations,
    actions,
    getters
})